<template>
  <div class="fillcontain">
    <div class="send_message_container">

      <div class="search_box">
        <el-row :gutter="20">
          <el-col :md="20">
            <span class="span">历史推送:</span>
            <el-date-picker
              v-model="sendHistoryDate"
              @change="getAlidayuMessageSendData()"
              :default-time="['00:00:00']"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-col>
          <el-col :md="4">
            <div class="last">
              <el-button
                type="primary"
                class="send_new_btn"
                @click="addNewMessage()"
              >新建短信推送</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-row :gutter="10">
        <el-table
          v-loading="tableloading"
          :data="AlidayuMessageSendTableData"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            type="index"
            align="center"
            fixed
          >
          </el-table-column>
          <el-table-column
            property="createTime"
            :formatter="formatterTime"
            label="推送时间"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="templateName"
            label="模版名称"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column property="templateCode" label="模版CODE" align="center">
          </el-table-column> -->
          <el-table-column
            property="context"
            :formatter="formatterWordsNumber"
            label="短信内容"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="count"
            label="发送数量"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="sendStatus"
            label="发送状态"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="详情"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="goView(scope.row,1)"
                type="text"
                size="small"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div
          class="Pagination"
          style="text-align: left;margin-top: 10px;"
        >
          <el-pagination
            @size-change="pageSizeChange"
            @current-change="currentChange"
            :current-page="currentPage"
            :page-size="limit"
            layout="total, prev, pager, next"
            :total="count"
          >
          </el-pagination>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>
import { fetchAlidayuMessageSendData } from "@/api/getData";
import { formatDateTime } from "@/util/common";

export default {
  data() {
    return {
      count: 0,
      limit: 20,
      currentPage: 1,
      tableloading: false,
      sendHistoryDate: [],
      AlidayuMessageSendTableData: []
    };
  },
  created() {
    this.getAlidayuMessageSendData();
  },
  methods: {
    pageSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    currentChange(val) {
      this.currentPage = val;
      // if (this.searchInpt !== "") {
      //   const page = "1";
      //   this.searchFeedbackData(page);
      // } else {
      this.getAlidayuMessageSendData();
      // }
    },
    formatterTime(row) {
      if (row.createTime) {
        return formatDateTime(row.createTime);
      } else {
        return "";
      }
    },
    formatterWordsNumber(row) {
      if (row.context.length > 10) {
        const word = row.context;
        return word.slice(0, 10) + "...";
      } else {
        return row.context;
      }
    },
    async getAlidayuMessageSendData() {
      let startTime = "";
      let endTime = "";
      if (this.sendHistoryDate == null || this.sendHistoryDate.length == 0) {
        startTime = "";
        endTime = "";
      } else {
        startTime = formatDateTime(this.sendHistoryDate[0]);
        endTime = formatDateTime(this.sendHistoryDate[1]);
      }
      this.tableloading = true;
      const sendData = await fetchAlidayuMessageSendData({
        pageNo: this.currentPage,
        pageSize: this.limit,
        startTime: startTime,
        endTime: endTime
      });
      this.tableloading = false;
      this.AlidayuMessageSendTableData = [];
      this.count = sendData.data.total;
      if (sendData.data.list) {
        sendData.data.list.forEach(item => {
          const tableData = {};
          tableData.createTime = item.createTime;
          tableData.templateName = item.templateName;
          tableData.templateCode = item.templateCode;
          tableData.context = item.context;
          tableData.count = item.count;
          tableData.sendStatus = item.sendStatus;
          this.AlidayuMessageSendTableData.push(tableData);
        });
      }
    },
    //typeId  1短信2友盟3站内
    addNewMessage() {
      this.$router.push({ path: "sendNewMessage", query: { typeId: "1" } });
    },
    goView(data, i) {
      this.$router.push({
        path: "messageView",
        query: {
          createTime: formatDateTime(data.createTime),
          templateCode: data.templateCode,
          context: data.context,
          templateId: i
        }
      });
    }
  },
  watch: {
    $route() {
      this.getAlidayuMessageSendData();
    }
  }
};
</script>
<style lang="less" scoped>
.send_message_container {
  padding: 20px;
}
.send_new_message {
  padding: 10px;
}
.send_new_btn {
  width: 100%;
}
</style>
